<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
//分类选择器
const activeIndex = ref(0)
const list = ref([])
const dishList = ref([])
const setmealList = ref([])
const type = ref(0)
import { categoryList } from '../apis/category.js'
const items = ref([])
async function getCategoryList() {
    const res = await categoryList();
    console.log(res.data.data)
    list.value = res.data.data;
    type.value = list.value[0].type
    dishList.value = list.value[0].dishList;
    setmealList.value = list.value[0].setmealList;
    //添加分类列表 和 药品和药品组合数量
    list.value.forEach(item => {
        items.value.push({ text: item.name })
        if (item.type === 1) {
            item.dishList.forEach(item => {
                item.number = 0
                console.log(item)
            })
        }
        if (item.type === 2)
            item.setmealList.forEach(item => {
                item.number = 0
                console.log(item)
            })
    })
}
getCategoryList();
const onChange = (index) => {
    showToast(`标签名 ${index}`);
    dishList.value = list.value[index].dishList;
    type.value = list.value[index].type
    setmealList.value = list.value[index].setmealList;
    console.log(dishList.value)
}
//弹窗
const show = ref(false);
const dishInfo = ref({})
const title = ref('')
const checked = ref([])
const checkedVlue = ref([])
const cartNumber = ref(0)
function close() {
    show.value = false
}
const shoppingCart = ref([])
// 获取购物车列表
import { getCartList, addShoppingCart, clearShoppingCart } from '../apis/shoppingCart.js'
async function getShoppingCartList() {

    const res = await getCartList();
    shoppingCart.value = res.data.data;
    //获取购物车药品和药品组合总数量
    cartNumber.value = 0
    shoppingCart.value.forEach(item => {
        cartNumber.value += item.number
    })
    //给list列表药品组合和药品数量赋值
    setTimeout(() => {
        list.value.forEach(item => {
            if (item.dishList) {
                item.dishList.forEach(item => {
                    item.number = 0
                    shoppingCart.value.forEach(item2 => {
                        if (item.id === item2.dishId) {
                            item.number = item2.number
                            console.log(item.number)
                        }
                    })

                })
            }
            if (item.setmealList) {
                item.setmealList.forEach(item => {
                    item.number = 0
                    shoppingCart.value.forEach(item2 => {
                        if (item.id === item2.setmealId) {
                            item.number = item2.number
                        }
                    })
                })
            }
        })
    }, 100);

}
getShoppingCartList();
//加入购物车
async function addCart(item, type) {
    if (type === 1) {
        //是药品
        //添加到购物车  调用请求的方式添加 并刷新购物车
        await addShoppingCart({
            name: item.name,
            image: item.image,
            dishId: item.id,
            number: 1,
            price: item.price,
            amount: item.price,
        })
        await getShoppingCartList();
        return
    }
    if (type === 2) {
        //添加到购物车  调用请求的方式添加 并刷新购物车
        await addShoppingCart({
            name: item.name,
            image: item.image,
            setmealId: item.id,
            number: 1,
            price: item.price,
            amount: item.price,
        })
        await getShoppingCartList();
        console.log(shoppingCart.value)
    }
}
import { reduceBySetmealId, reduceByDishId } from '../apis/shoppingCart.js'
async function reduceCart(item, type) {
    if (type === 1) {
        await reduceByDishId(item.id)
        getShoppingCartList()
    }
    if (type === 2) {
        await reduceBySetmealId(item.id)
        getShoppingCartList()
    }
}
async function addCart2() {
    //直接添加到购物车 调用请求的方式添加并刷新购物车
    await addShoppingCart({
        name: dishInfo.value.name,
        image: dishInfo.value.image,
        dishId: dishInfo.value.dishId,
        number: 1,
        price: dishInfo.value.price,
        amount: dishInfo.value.price,
        dishFlavor: [...checkedVlue.value].join(',')
    })
    await getShoppingCartList();
    console.log(shoppingCart.value)
    show.value = false
}
//购物车弹窗
const cart = ref(false)
function showCart() {
    cart.value = true
}
//清空购物车 调用请求的方式添加
async function clearCart() {
    await clearShoppingCart();
    getShoppingCartList();
    list.value.forEach(item => {
        if (item.dishList) {
            item.dishList.forEach(item => {
                item.number = 0
            })
        }
        if (item.setmealList) {
            item.setmealList.forEach(item => {
                item.number = 0
            })
        }
    })
}
import { reduceById, addById } from '../apis/shoppingCart.js'
//动作栏购物车减
async function reduce(item) {
    await reduceById(item.id)
    getShoppingCartList()
}
//动作栏购物车加
async function add(item) {
    await addById(item.id)
    getShoppingCartList()
}
import router from '../router';
//个人中心
function goUser() {
    router.push('/user')
}
//去结算
const amount = ref(0)
function goPay() {
    amount.value = 0;
    //先查看购物车是否满足15元
    shoppingCart.value.forEach(item => {
        amount.value += item.amount
    })
    if (amount.value < 15) {
        console.log(amount.value)
        showToast('购物车金额不足¥15')
        return
    }
    router.push('/createOrder')
}
const status = ref(1)
//判断当前时间
function checkCurrentTime() {
    var currentTime = new Date().getHours(); // 获取当前小时数（0-23）

    if (currentTime < 8 || currentTime > 22) {
        // 如果当前时间小于8点或者大于22点
        status.value = 0

    } else {
        // 其他时间段
        status.value = 1
    }
}


// 每秒更新一次时间
setInterval(checkCurrentTime, 1000);
</script>
<template>
    <!-- 个人中心 -->
    <van-button type="primary" size="small" @click="goUser()">个人中心</van-button>
    <!-- 卡片 -->
    <div>
        <van-card desc="欢迎使用药品商城" title="药品商城" thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
            <template #tags>
                <van-tag plain type="primary">{{ status === 1 ? '营业中' : '打烊中' }}</van-tag>
            </template>
        </van-card>
    </div>
    <!-- 分类选择器 -->
    <van-tree-select @click-nav="onChange" v-model:main-active-index="activeIndex" height="77%" :items="items">
        <template #content>
            <div v-if="type === 1" v-for="(item, index) in dishList" :key="index">
                <van-card :price="item.price" :desc="item.description" :title="item.name" :thumb="item.image">
                    <template #footer>
                        <van-button type="primary" v-if="item.number !== 0" size="small"
                            @click="reduceCart(item, 1)">-</van-button>
                        {{ item.number === 0 ? null : item.number }}
                        <van-button type="primary" size="small" @click="addCart(item, 1)">+</van-button>
                    </template>
                </van-card>
            </div>
            <div v-if="type === 2" v-for="(item, index) in setmealList" :key="index">
                <van-card :price="item.price" :title="item.name" :thumb="item.image">
                    <template #desc>
                        {{ item.description }}
                    </template>
                    <template #footer>
                        <van-button type="primary" v-if="item.number !== 0" size="small"
                            @click="reduceCart(item, 2)">-</van-button>
                        {{ item.number === 0 ? null : item.number }}
                        <van-button type="primary" size="small" @click="addCart(item, 2)">+</van-button>
                    </template>
                </van-card>
            </div>
        </template>
    </van-tree-select>

    <!-- 动作面板 -->
    <van-action-sheet v-model:show="cart" title="购物车" style="height: 400px;">
        <van-button size="small" color="blue" @click="clearCart()">清空购物车</van-button>
        <div v-if="shoppingCart.length === 0" style="margin-bottom: 10px;">
            <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                :image-size="[60, 60]" description="购物车空空如也!" />
        </div>

        <div v-for="(item, index) in shoppingCart">
            <van-card :price="item.amount" v-if="item.dishFlavor" :desc="item.dishFlavor" :title="item.name"
                :thumb="item.image">
                <template #footer>
                    <van-button size="small" @click="reduce(item)">-</van-button>
                    {{ item.number === 0 ? null : item.number }}
                    <van-button size="small" @click="add(item)">+</van-button>
                </template>
            </van-card>
            <van-card :price="item.amount" v-if="!item.dishFlavor || item.dishFlavor === ''" :title="item.name"
                :thumb="item.image">
                <template #footer>
                    <van-button size="small" @click="reduce(item)">-</van-button>
                    {{ item.number === 0 ? null : item.number }}
                    <van-button size="small" @click="add(item)">+</van-button>
                </template>
            </van-card>
        </div>
    </van-action-sheet>


    <!-- 动作栏 -->
    <div style="display: flex;">
        <van-action-bar style="background-color:aqua ;">
            <van-badge :show-zero="false" :content="cartNumber">
                <van-action-bar-icon icon="cart-o" style="background-color:aqua ;" @click="showCart()" />
            </van-badge>
            <van-button style="width: 40%;margin-left: 55%;" type="danger" text="去结算(¥15起送)" @click="goPay()" />
        </van-action-bar>
    </div>


    <!-- 弹窗 -->
    <van-dialog v-model:show="show" :title="title" :show-confirm-button="false" width="90%">
        <van-button style=" position: absolute;top: 10px; right: 10px;" @click="close()">x</van-button>
        <img :src="dishInfo.image" style="height: 20vh;margin-left: 26%;" />
        <div v-for="(item, index) in dishInfo.dishFlavorList" :key="index" style="margin-top: 10px">
            <van-radio-group v-model="checkedVlue[index]" shape="square" direction="horizontal">
                <div v-for="(item2, index2) in item" :index="index2">
                    <van-radio :name="checked[index][index2]">{{ item2 }}</van-radio>
                </div>
            </van-radio-group>
        </div>
        <van-button @click="addCart2">加入购物车{{ checkedVlue }}</van-button>
    </van-dialog>
</template>
